<!-- 物流信息 -->
<template>
  <view class="editLogistics">
    <HeadNav :page-name="headTitle" :borderType="true" :showNav="true" />
    <view class="bgf">
      <view class="fw5 linh-48 u-p-l-32 u-p-r-32 boxsha">{{routeData.source === 'aftersale' ? '请填写退货物流快递单号' : '快递单号'}}</view>
      <view class="u-flex linh-48 u-p-l-32 u-p-r-32 boxsha">
        <view style="flex: 1" class="u-p-r-30">
          <u-input v-model="postParams.logisticsCode" type="text" height="96" placeholder="请输入快递单号"  />
        </view>
        <!-- <view>
          <image
            src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/qrCode_icon.png"
            mode="widthFix"
            style="width: 36rpx; height: auto"
          />
        </view> -->
      </view>
      <view class="u-flex linh-48 u-p-l-32 u-p-r-32 boxsha">
        <view style="flex: 1" :style="postParams.logisticsName ? '' : 'color:#c0c4cc;'" @click="_selectLogistics">{{
          postParams.logisticsName || "请选择快递公司"
        }}</view>
        <button class="editBtn fz-12" v-if="postParams.logisticsName" @click="_selectLogistics">修改</button>
        <image
          v-else
          style="width:16rpx;height:auto"
          mode="widthFix"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16316065116231620226.png"
        />
      </view>
    </view>
    <view class="themeBgColor configBtn" @click="configSeve"> 保存 </view>


    <!-- 快递公司弹窗 -->
    <u-popup v-model="selectLogisticsShow" mode="bottom" border-radius="24" @maskClick="selectLogisticsShow = false">
      <view>
        <view class="linh-48 fw5 tc boxsha fz-16">请选择快递公司</view>
        <scroll-view scroll-y style="max-height:800rpx;" class="listBody"> 
          <view class="u-padding-left-32 u-padding-right-32 linh-48 u-flex u-row-between" v-for="item in logisticsOption" :key="item.id" @click="_changeItem(item)">
            <view>{{item.name}}</view>
            <u-icon name="checkbox-mark" class="themeFontColor" size="28" v-if="postParams.logisticsComCode === item.code"></u-icon>
          </view>
        </scroll-view>
        <view class="safe-bottom"></view>
      </view>
		</u-popup>
  </view>
</template>

<script>
import HeadNav from "@/components/headNav/index.vue";
import orderApi from "@/api/orderApi.js";

export default {
  components: {
    HeadNav,
  },
  data() {
    return {
      isFirst: true,
      routeData: {
        types: 1 // 1新增发货地址 2修改发货地址
      },
      postParams: {
        logisticsCode: "", //	物流单号
        logisticsComCode: "", // 物流公司编号
        logisticsName: "", // 物流公司名称
      },
      logisticsOption: [], // 快递公司列表
      selectLogisticsShow: false,
      headTitle: '添加快递信息',
    };
  },
  async onLoad(options){
    this.routeData = options
    if(options){
      this.isFirst = false
      this.postParams.logisticsCode = options?.logisticsCode || ""
      if(this.postParams.logisticsCode){ // 存在物流单号，反查物流公司
        this.headTitle = '编辑快递信息'
        await this.logisticsAutoNumberFn(this.postParams.logisticsCode)
      }
    }

    setTimeout(() => {
      this.isFirst = true
    }, 1000);

    this._getLogisticsOption()
  },
  watch: {
    'postParams.logisticsCode'(newTxt){
      if(this.isFirst && newTxt){
        this.throttle(this.logisticsAutoNumberFn, null, 500, newTxt);
      }
    }
  },
  methods:{
    // 节流函数
    throttle(fn,context,delay,text){
      clearTimeout(fn.timer);
      fn.timer = setTimeout(() => {
          fn.call(context,text);
      },delay);
    },
    async logisticsAutoNumberFn(code){
      const { data } = await orderApi.logisticsAutoNumber({num: code})
      if(data){
        this.postParams.logisticsName = data.name
        this.postParams.logisticsComCode = data.comCode
      }
    },
    // 获取快递列表
    _getLogisticsOption(){
      orderApi.getLogisticsOption().then(res=>{
        this.logisticsOption = res.data
        
        if(!this.postParams.logisticsComCode && this.routeData.logisticsName){ // 传参过来名称，却通过单号没有反查到
          this.logisticsOption.forEach(v=>{
            if(v.name === this.routeData.logisticsName){
              this.postParams.logisticsName = v.name
              this.postParams.logisticsComCode = v.code
            }
          })
        }
      })
    },
    // 选择快递
    _selectLogistics(){
      this.selectLogisticsShow = true
    },
    _changeItem(item){
      this.postParams.logisticsComCode = item.code
      this.postParams.logisticsName = item.name
      this.selectLogisticsShow = false
    },
    // 保存
    async configSeve(){
      let params = JSON.parse(JSON.stringify(this.postParams))
      if(!params.logisticsCode || !params.logisticsComCode){
        uni.showToast({
          title: '请填写快递信息',
          icon: 'none'
        });
        return
      }
      if(this.routeData.source === 'aftersale'){ // 来源是买家退货售后
        params.orderAfterSalesId =  this.routeData.orderAfterSalesId // 售后ID
        if(this.routeData.types == 2){ // 编辑
          await orderApi.updateUserCourierNumber(params)
          uni.showToast({
            title: '修改成功',
            icon: 'none'
          });
        }else{ // 新增
          await orderApi.addUserCourierNumber(params)
          uni.showToast({
            title: '填写成功',
            icon: 'none'
          });
        }
        setTimeout(() => {
          this.navigateBack()
        }, 1500);
      }else{ // 来源是订单
        params.orderAllId = this.routeData.orderAllId // 订单ID
        if(this.routeData.types == 2){ // 编辑
          params.orderShipId = this.routeData.orderShipId // 快递ID
          await orderApi.updateLogisticsInfo(params)
          uni.showToast({
            title: '修改成功',
            icon: 'none'
          });
        }else{ // 新增
          await orderApi.deliverGoods(params)
          uni.showToast({
            title: '发货成功',
            icon: 'none'
          });
        }
        setTimeout(() => {
          this.navigateBack()
        }, 1500);
      }
    }
  }
};
</script>
<style scoped>
.editLogistics {
  background-color: #F7F8FA;
  min-height: 100vh;
}
.bgf {
  background-color: #fff;
}
.editBtn {
  line-height: 42rpx;
  padding: 4rpx 30rpx;
  border: solid 1px #dcdee0;
  border-radius: 30rpx;
}
.boxsha {
  box-shadow: inset 0px -1px 0px #eeeeee;
}
.configBtn {
  margin: 64rpx 32rpx;
  border-radius: 88rpx;
  line-height: 88rpx;
  text-align: center;
  color: #fff;
}
</style>
